<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>YAML | Example &quot;2col_advanced&quot;</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- (en) Add your meta data here -->
<!-- (de) Fuegen Sie hier ihre Meta-Daten ein -->
<link href="css/layout_2col_advanced.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 7]>
<link href="css/patches/patch_2col_advanced.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div class="page_margins">
  <div class="page">
    <div id="header">
      <div id="topnav">
        <!-- start: skip link navigation -->
        <a class="skip" href="#navigation" title="skip link">skip to navigation</a><span class="hideme">.</span>
        <a class="skip" href="#content" title="skip link">skip to content</a><span class="hideme">.</span>
        <!-- end: skip link navigation -->
        <span><a href="#">Login</a> | <a href="#">Contact</a> | <a href="#">Imprint</a></span> </div>
      <h1>Example | Beispiel <em>&laquo;2col_advanced&raquo;</em></h1>
      <span>YAML &#8226; (X)HTML/CSS Framework</span></div>
    <!-- begin: main navigation #nav -->
    <div id="nav">
      <!-- skiplink anchor: navigation -->
      <a id="navigation" name="navigation"></a>
      <div class="hlist">
        <ul>
          <li><a href="../index.html">Table Of Contents</a></li>
          <li><a href="3col_advanced.html">Next Example</a></li>
          <li><a href="../05_navigation/menu_vertical_listnav.html">Previous Example</a></li>
        </ul>
      </div>
    </div>
    <!-- end: main navigation -->
    <!-- begin: main content area #main -->
    <div id="main">
      <!-- begin: #col1 - first float column -->
      <div id="col1">
        <div id="col1_content" class="clearfix">
          <h2>Column  #col1</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam leo.  Donec massa tellus, sodales vitae, mattis a, pretium in, nisi.  Pellentesque ultrices, lacus eget volutpat commodo, lorem purus  faucibus dolor, ut faucibus ipsum tellus a elit. Pellentesque habitant  morbi tristique senectus et netus et malesuada fames ac turpis egestas.  Pellentesque ut mi sed dolor nonummy rhoncus. Duis laoreet est id  mauris dignissim porttitor. </p>
          <div class="subcolumns">
            <div class="c50l">
              <div class="subcl">
                <h3>Left Subcolumn </h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam leo.  Donec massa tellus, sodales vitae, mattis a, pretium in, nisi.  Pellentesque ultrices, lacus eget volutpat commodo, lorem purus  faucibus dolor, ut faucibus ipsum tellus a elit. Pellentesque habitant  morbi tristique senectus et netus et malesuada fames ac turpis egestas.  Pellentesque ut mi sed dolor nonummy rhoncus. Duis laoreet est id  mauris dignissim porttitor. </p>
                <p>Etiam ullamcorper magna et dui. Morbi  lectus metus, porta sit amet, accumsan nec, aliquet vitae, nisl. Proin  cursus tempus lectus. Ut a risus et neque ornare molestie. Nulla erat  enim, dictum in, interdum vitae, rhoncus non, ligula. Sed sollicitudin  sollicitudin turpis. Maecenas vitae neque.</p>
              </div>
            </div>
            <div class="c50r">
              <div class="subcr">
                <h3>Right Subcolumn </h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam leo.  Donec massa tellus, sodales vitae, mattis a, pretium in, nisi.  Pellentesque ultrices, lacus eget volutpat commodo, lorem purus  faucibus dolor, ut faucibus ipsum tellus a elit. </p>
                <p>Pellentesque habitant  morbi tristique senectus et netus et malesuada fames ac turpis egestas.  Pellentesque ut mi sed dolor nonummy rhoncus. Duis laoreet est id  mauris dignissim porttitor. Etiam ullamcorper magna et dui. Morbi  lectus metus, porta sit amet, accumsan nec, aliquet vitae, nisl. Proin  cursus tempus lectus. Ut a risus et neque ornare molestie. Nulla erat  enim, dictum in, interdum vitae, rhoncus non, ligula. Sed sollicitudin  sollicitudin turpis. Maecenas vitae neque.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end: #col1 -->
      <!-- begin: #col3 static column -->
      <div id="col3">
        <div id="col3_content" class="clearfix"> 
          <!-- skiplink anchor: Content -->
          <a id="content" name="content"></a>
          <h2>Column #col3</h2>
          <div class="info">
          <h2>About this example</h2>
          <p> This   <em>advanced</em> example, combines several basic layout options. </p>
          <p>It's a flexible 2-column layout with  <a href="http://www.yaml.de/en/documentation/practice/column-design.html">column separators</a> and it makes use of YAML <a href="http://www.yaml.de/en/documentation/practice/subtemplates.html">grid elements</a> (subtemplates) to subdivide the content in <code>#col1</code>.</p>
          <p>This example is explained in detail in the <a href="http://www.yaml.de/en/documentation/practice/application-examples/flexible-2-column-layout.html">documentation</a>.</p>
          </div>
        </div>
        <div id="ie_clearing">&nbsp;</div>
        <!-- End: IE Column Clearing -->
      </div>
      <!-- end: #col3 -->
    </div>
    <!-- end: #main -->
    <!-- begin: #footer -->
    <div id="footer">Footer with copyright notice and status information<br />
Layout based on <a href="http://www.yaml.de/">YAML</a></div>
    <!-- end: #footer -->
  </div>
</div>
</body>
</html>
